<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情页</title>
		<link rel="icon" href="img/170612_02i668aijej2cb21ji56g98a218dg_48x48.png">
		<link rel="stylesheet" href="css/details.css" />
		<script src="js/jquery-1.8.3.js"></script>
		<script src="js/jquery.cookie.js"></script>
	</head>
	<body>
		<!--**************顶部导航栏-->
		<div id="top_nav">
			<div class="top_nav">
				<div class="back_index">
					<a href="#">美丽说首页</a>
				</div>
				<ul>
					<li class="top_chatwei"><a href="#"><i class="weixin" style="background-position: -25px 0"></i>微信登录</a></li>
					<li class="qq_login"><a href="#"><i style="background-position: -52px 0"></i>QQ登录</a></li>
					<li class="login"><a href="#">登录</a></li>
					<li class="register"><a href="#">注册</a></li>
					<li class="user"><a href="#"></a></li>
					<li class="my_collection">
						<a href="#"><i style="background-position: -76px 0"></i>我的收藏</a><br />
						<ol>
							<li><a href="#">收藏宝贝</a></li>
							<li><a href="#">收藏店铺</a></li>
						</ol>
					</li>
					<li class="top_mychart"><a href="#"><i style="background-position: -102px 0"></i>我的购物车</a></li>
					<li class="my_order"><a href="#"><i style="background-position: -130px 0"></i>我的订单</a></li>
					<li class="help_center">
						<a href="#">帮助中心<i style="background-position: -170px 3px"></i></a>
						<ol>
							<li><a href="#">买家服务</a></li>
							<li><a href="#">商家服务</a></li>
							<li><a href="#">规则中心</a></li>
						</ol>
					</li>
					<li class="business_way"><a href="#">商家后台</a></li>
				</ul>
			</div>
		</div>
		<!--**********商品详情页公共布局-->
		<div class="public_header">	
			<!--**************搜索栏*********-->
			<div class="shop_header_wrap">
				<div class="shop_header">
					<div class="shop_header_left">
						<dl>
							<dt><a href="#"></a></dt>
							<h3 class="shop_name"><a href="#">美丽优选</a></h3>
							<dd>
								<p>
									描述<span class="shop_describe">4.60</span>
									价格<span class="shop_price">4.59</span>
									质量<span class="shop_quality">4.57</span>
									服务<span class="service">4.62</span>
								</p>							
							</dd>
						</dl>
						<ul>
							<li class="shop_collection"><a href="#">收藏</a></li>
							<li class="service"><a href="#">联系客服</a></li>
						</ul>
					</div>
					<div class="shop_header_right">
						<input type="text" class="shop_search_text" placeholder="搜索你想要的商品"/>
						<a href="javascript:;" class="search_gloabl">搜全站</a><a href="javaxcript:;" class="shop_search">搜本店</a>
					</div>
				</div>
			</div>
			<div class="shop_logo">
				<a href="#"></a>
			</div>
			<div class="shop_nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li class="all_goods">
						<a href="#">全部商品<b></b></a>
					</li>
					<li><a href="#">官方出品</a></li>
					<li><a href="#">新品</a></li>
					<li><a href="#">套装</a></li>
					<li class="skirt_godds"><a href="#">裙子<b></b></a></li>
					<li class="jacket_goods"><a href="#">上衣<b></b></a></li>
					<li class="pants_goods"><a href="#">裤子<b></b></a></li>
				</ul>
			</div>
		</div>
		<!--*********************商品详情页-->
		<div class="details_body_wrap">
			<div class="details_body">
				<<div class="goods_infor">
					<div class="goods_show">
						<div class="good_show">
							<div class="big_img">
								<div class="good_img">
									<ul>
										<li><img src="images/upload_4llhdb75h5fe447bd80ji6c73e868_640x900.jpg_468x468.jpg"/></li>
										<!--<li><img src="images/upload_5317fk745e459de87iaklcbd91gk7_640x900.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_5gj16il86ggj28heailh0c34f7f75_640x900.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_80id4hahfbkhbfil0fd2038c6ab2h_672x945.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_8g968577c6k65c0ca8cj18lf6aa4c_640x900.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_4llhdb75h5fe447bd80ji6c73e868_640x900.jpg_468x468.jpg"/></li>-->
									</ul>
								</div>
							</div>
							<div class="small_img">
								<ul>
									<a href="javascript:;" class="btn_click_l"></a>
										<li><img src="images/upload_4llhdb75h5fe447bd80ji6c73e868_640x900.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_5317fk745e459de87iaklcbd91gk7_640x900.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_5gj16il86ggj28heailh0c34f7f75_640x900.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_80id4hahfbkhbfil0fd2038c6ab2h_672x945.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_8g968577c6k65c0ca8cj18lf6aa4c_640x900.jpg_468x468.jpg"/></li>
										<a href="javascript:;" class="btn_click_r"></a>
								</ul>
							</div>
						</div>
					</div>
					<div class="good_infor">
						<div class="border"></div>
						<h3 class="tittle">新款百搭韩版小清新修身显瘦荷叶边针织连衣裙A字裙小黑裙打底裙</h3>
						<ul>
							<li class="good_price">价格：
								<dl>
										<dt>￥<span>99</span></dt>
										<dd>评价：<span></span></dd>
										<dd>累计销量：<i>232</i></dd>
								</dl>
							</li>
							<li class="kefu">客服：<p><a href="#">联系客服</a></p></li>
							<li class="color">颜色：<p><span class="color_active"><img src="images/upload_4llhdb75h5fe447bd80ji6c73e868_640x900.jpg_100x100.jpg"/></span><span><img src="images/upload_80id4hahfbkhbfil0fd2038c6ab2h_672x945.jpg_100x100.jpg"/></span></p></li>
							<li class="size">尺码：
								<p>
									<b>S</b>
									<b>M</b>
									<b>X</b>
									<b>XL</b>
								</p>
							</li>
							<li class="num">数量：
								<p><a href="javascript:;" class="minus"></a> 1 <a href="javascript:;" class="add"></a></p>  <b>库存：9221</b>
							</li>
							<li class="buy_addchart">
								<p>
									<input type="button" class="btn_buy" value="立即购买"/>
									<input type="button" class="btn_add_chart" value="加入购物车"/>
								</p>
							</li>
							<li class="share">
								<p>
									<span class="good_collection">收藏</span><span class="good_share">分享</span>
								</p>
							</li>
							<li class="promise">服务承诺：
								<p>
									<span>退货补运费</span>
									<span>全国包邮</span>
									<span>7天无理由退货</span>
									<br />
									<span>72小时发货</span>
								</p>
							</li>
							<li class="pay_way">支付方式：
								<span></span>
								<span></span>
								<span></span>
								<span></span>
							</li>
						</ul>
						
					</div>
				</div>
				<div class="recommend">
					<h4>
						热卖推荐
					</h4>
					<dl>
						<dt><a href="#"><img src="images/170706_24048j24klf9i00a8jjgk1i9ibchg_640x900.jpg_220x330.jpg"/></a></dt>
						<dd><p class="recommend_price">￥999</p></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="images/170706_24048j24klf9i00a8jjgk1i9ibchg_640x900.jpg_220x330.jpg"/></a></dt>
						<dd><p class="recommend_price">￥999</p></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="images/170706_24048j24klf9i00a8jjgk1i9ibchg_640x900.jpg_220x330.jpg"/></a></dt>
						<dd><p class="recommend_price">￥999</p></dd>
					</dl>
				</div>
			</div>
		</div>
		<script>
			for(var i = 0; i < $(".color p span").size(); i ++){
				console.log(1);
				$(".color p span").eq(i).removeClass("color_active");
				$(".color p span").click(function(){
					$(this).addClass("color_active")
				})
			}
			
			$(".btn_add_chart").click(function(){
				
			})
		</script>
		<script>
			var str = location.href;
			var arr = str.split("?");
			var pid = arr[1].split("=")[1];
//			console.log(arr);
			$.ajax({
					type:"get",
					url:"json/jn.json",
					success:function(glist){
						var html = "";
						var htmlright='';
						//console.log(glist.length);
						var glist_list = glist["list"];
						for (var i = 0 ; i < glist_list.length ; i++){
							var pro = glist_list[i];
//							console.log(pid == pro.id);
								if(pid == pro.id){
									html +=`<div class="goods_infor">
					<div class="goods_show">
						<div class="good_show">
							<div class="big_img">
								<div class="good_img">
									
									<ul>
										
										<li><img src="${pro.img}"/></li>
										<!--<li><img src="images/upload_5317fk745e459de87iaklcbd91gk7_640x900.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_5gj16il86ggj28heailh0c34f7f75_640x900.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_80id4hahfbkhbfil0fd2038c6ab2h_672x945.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_8g968577c6k65c0ca8cj18lf6aa4c_640x900.jpg_468x468.jpg"/></li>
										<li><img src="images/upload_4llhdb75h5fe447bd80ji6c73e868_640x900.jpg_468x468.jpg"/></li>-->
									</ul>
								</div>
							</div>
							<div class="small_img">
								<ul>
									<a href="javascript:;" class="btn_click_l"></a>
										<li><img src="${pro.img}"/></li>
										<li><img src="${pro.img}"/></li>
										<li><img src="${pro.img}"/></li>
										<li><img src="${pro.img}"/></li>
										<li><img src="${pro.img}"/></li>
										
										<a href="javascript:;" class="btn_click_r"></a>
								</ul>
							</div>
						</div>
					</div>
					<div class="good_infor">
						<div class= "border"></div>
						<h3 class="tittle">${pro.title}</h3>
						<ul>
							<li class="good_price">价格：
								<dl>
										<dt>￥<span>${pro.price}</span></dt>
										<dd>评价：<span></span></dd>
										<dd>累计销量：<i>${pro.collection}</i></dd>
									</dl>
								
							</li>
							<li class="kefu">客服：<p><a href="#">联系客服</a></p></li>
							<li class="color">颜色：<p><span><img src="images/upload_4llhdb75h5fe447bd80ji6c73e868_640x900.jpg_100x100.jpg"/></span><span><img src="images/upload_80id4hahfbkhbfil0fd2038c6ab2h_672x945.jpg_100x100.jpg"/></span></p></li>
							<li class="size">尺码：
								<p>
									<b>S</b>
									<b>M</b>
									<b>X</b>
									<b>XL</b>
								</p>
							</li>
							<li class="num">数量：
								<p><a href="javascript:;" class="minus"></a> 1 <a href="javascript:;" class="add"></a></p>  <b>库存：9221</b>
							</li>
							<li class="buy_addchart">
								<p>
									<input type="button" class="btn_buy" value="立即购买"/>
									<input type="button" class="btn_add_chart" value="加入购物车"/>
								</p>
							</li>
							<li class="share">
								<p>
									<span class="good_collection">收藏</span><span class="good_share">分享</span>
								</p>
							</li>
							<li class="promise">服务承诺：
								<p>
									<span>退货补运费</span>
									<span>全国包邮</span>
									<span>7天无理由退货</span>
									<br />
									<span>72小时发货</span>
								</p>
							</li>
							<li class="pay_way">支付方式：
								<span></span>
								<span></span>
								<span></span>
								<span></span>
							</li>
						</ul>
						
					</div>
				</div>`
								}
						}
						
//						$(".details_body").html(html);
					}
			});

		</script>
		<script>
			if($.cookie("uesrName")){
				$(".top_chatwei").remove();
				$(".qq_login ").remove();
				$(".login").remove();
				$(".register").remove();
				$(".user a").css("display","block");
				$(".user a").html($.cookie("uesrName"));
				$(".top_mychart a").click(function(){
					location.href = "http://127.0.0.1:8020/MeiLiShuo21/cart.html";
				})
			}else{
				$(".top_mychart a").click(function(){
					location.href = "http://127.0.0.1:8020/MeiLiShuo21/register.html?__hbt=1501058771091"
				})
			}
		</script>
	</body>
</html>
